/**
 * bootstrap 4 Toast 组件
 */
;
(function ($) {
    'use strict';
    
    $('body').on('hidden.bs.toast', '.toast', function () {
        $(this).remove();
    });

    var toast = function (content, callback) {

        if (typeof (content) == 'object') {

            render(content);
        } else {

            render({
                content: content,
                callback: callback,
            });
        }

        function render(opts) {

            opts = $.extend({}, {
                id: '', // 指定ID
                title: '提示！',
                position: 'center-center', // 位置
                dismissible: false, // 显示关闭按钮
                stackable: true, // 是否堆叠
                pauseDelayOnHover: true, // 鼠标悬浮是否停止自动关闭
                delay: 2000, // 自动关闭延时
                type: 'primary', // 提示类型
                icon: '', // 显示一个icon
                css: '', // 指定样式
                callback: null, // 回调函数
            }, opts);

            /** 附加容器到body **/
            if (!$('#toast-container').length) {
                $('body').prepend(`<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>`);
                $('#toast-container').addClass(opts.position);
            }

            let container = $('#toast-container');
            let html = '';

            let id = opts.id || 'toast-' + new Date().getTime() + '-' + parseInt(Math.random() * 1000000);

            let delayOrAutohide = opts.delay ? `data-delay="${opts.delay}"` : `data-autohide="false"`;

            let title = opts.title;
            let subtitle = opts.subtitle;
            let content = opts.content;
            let hideAfter = ``;
            let paused = false;

            if (opts.pauseDelayOnHover && opts.delay) {
                delayOrAutohide = `data-autohide="false"`;
                hideAfter = `data-hide-after="${Math.floor(Date.now() / 1000) + (opts.delay / 1000)}"`;
            }

            html = `<div id="${id}" class="toast ${opts.css}" role="alert" aria-live="assertive" aria-atomic="true" ${delayOrAutohide} ${hideAfter}>`;
            html += `<div class="toast-header">`;

            html += opts.icon ? opts.icon : `<div class="toast-icon bg-${opts.type} mr-2"></div>`;

            html += `<strong class="mr-auto">${title}</strong>`;

            if (subtitle) {
                html += `<small class="text-white">${subtitle}</small>`;
            }

            if (opts.dismissible) {
                html += `<button type="button" class="ml-3 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true" class="text-black">&times;</span>
                    </button>`;
            }

            html += `</div>`;

            if (content) {
                html += `<div class="toast-body">${content}</div>`;
            }

            html += `</div>`;

            if (!opts.stackable) {
                container.find('.toast').each(function () {
                    $(this).remove();
                });

                container.append(html);
                container.find('.toast:last').toast('show');
            } else {
                container.append(html);
                container.find('.toast:last').toast('show');
            }

            if (opts.pauseDelayOnHover) {
                setTimeout(function () {
                    if (!paused) {
                        $(`#${id}`).toast('hide');
                        $(`#${id}`).remove();
                        opts.callback && opts.callback(); // 回调函数
                    }
                }, opts.delay);

                $('body').on('mouseover', `#${id}`, function () {
                    paused = true;
                });

                $(document).on('mouseleave', '#' + id, function () {
                    const current = Math.floor(Date.now() / 1000),
                            future = parseInt($(this).data('hideAfter'));

                    paused = false;

                    if (current >= future) {
                        $(this).toast('hide');
                        $(this).remove();
                        opts.callback && opts.callback(); // 回调函数
                    }
                });
            }

        }

    };
    
    $.extend({toast: toast}); // $.toast() 方式
    
})(window.jQuery);